<template>
  <div>
    <!-- 文件输入框，用于选择 JSON 文件 -->
    <input type="file" @change="handleFileUpload" accept=".json" />
    <button @click="uploadData" :disabled="!sections.length">上传数据</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const sections = ref([]); // 用来存储从 JSON 文件中读取的数据

    // 读取选中的 JSON 文件
    const handleFileUpload = (event) => {
      const file = event.target.files[0];
      if (file && file.type === 'application/json') {
        const reader = new FileReader();
        reader.onload = (e) => {
          try {
            const jsonData = JSON.parse(e.target.result);
            sections.value = jsonData; // 将文件中的数据赋值给 sections
          } catch (error) {
            console.error('读取文件失败:', error);
            alert('文件格式不正确或无法读取');
          }
        };
        reader.readAsText(file);
      } else {
        alert('请上传有效的 JSON 文件');
      }
    };

    // 上传数据
    const uploadData = async () => {
      const url = 'http://172.20.64.14:8000/api/section/add/'; // 后台接口地址

      for (const section of sections.value) {
        try {
          const response = await axios.post(url, section);
          console.log('上传成功:', response.data);
        } catch (error) {
          console.error('上传失败:', error);
        }
      }
    };

    return {
      sections,
      handleFileUpload,
      uploadData,
    };
  },
};
</script>

<style scoped>
/* 这里可以添加样式 */
</style>
